<template>
  <div class="dbox">
    <div class="div">
      <img class="tu" :src="list.cover_url" alt="" />
      <span>{{ list.title }}</span>
      <span>￥{{ list.price }}</span>
    </div>
    <div class="xi" v-html="list.details"></div>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      list: [],
    };
  },
  methods: {
    onClickButton() {},
  },
  mounted() {
    this.id = this.$route.query.id;
    this.$axios.get(`/api/goods/${this.id}`).then((res) => {
      this.list = res.data.goods;
      console.log(res);
    });
  },
};
</script>

<style>
.dbox {
  width: 100%;
}

.div {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.tu {
  width: 100%;
  height: 410px;
}
</style>
